<template>
  <div>
    <h1>管理员页面</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>学号</th>
          <th>用户名</th>
          <th>电话号码</th>
          <th>邮箱</th>
          <th>注册日期</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.userID">
          <td>{{ user.userID }}</td>
          <td>{{ user.usernum }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.userPhone }}</td>
          <td>{{ user.useremail }}</td>
          <td>{{ user.created_at }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import axios from 'axios';

const users = ref([]);

const fetchUsers = async () => {
  try {
    const response = await axios.get('http://localhost:8000/adminuser');
    console.log(response.data); // 添加日志
    users.value = response.data;
  } catch (error) {
    console.error('Error fetching users:', error);
    alert('无法获取用户数据，请稍后再试。');
  }
};

const checkAdmin = async () => {
  try {
    const response = await axios.get('http://localhost:8000/usertype/checkAdmin', { withCredentials: true });
    if (response.data.status === 'error' || !response.data.isAdmin) {
      window.location.href = 'http://localhost:5173/#/403';
    }
  } catch (error) {
    console.error('Error checking admin status:', error);
    window.location.href = 'http://localhost:5173/#/403';
  }
};

onMounted(() => {
  checkAdmin().then(() => {
    fetchUsers();
  });
});
</script>

<style>
/* 在这里添加CSS样式 */
</style>
